<template>
  <div>
    <p>现在的数字是{{ xzNumber }}， 数字是{{ oddOreven }}</p>
    <br/>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">incriment is odd</button>
    <button @click="incrementAsnyc">incrementAsnyc</button>

  </div>
</template>

<script>
import {mapActions, mapGetters, mapState} from 'vuex'

export default {
  name: 'App',

  ...mapState(['xzNumber']),

  computed: {//
    ...mapGetters(['oddOreven', 'count'])
  },
  methods: mapActions(
    [ 'increment',
      'decrement',
      'incrementOdd',
      'incrementAsnyc'
    ]
  )

  // methods: {
  //   increment() {
  //     const count = this.xzNumber
  //     this.xzNumber = count + 1
  //   },
  //   decrement() {
  //     const count = this.xzNumber
  //     this.xzNumber = count - 1
  //
  //   },
  //   incrementOdd() {
  //     const count = this.xzNumber
  //     if (count % 2 === 1) {
  //       this.xzNumber = count + 1
  //     }
  //   },
  //   incrementAsnyc() {
  //       setTimeout(()=>{
  //         const count = this.xzNumber
  //         this.xzNumber = count + 1
  //       },1000)
  //   },
  // }
}
</script>

<style>

</style>
